<template>
  <div id="app">
    <Header />
    <router-view></router-view>
    <!-- 
      Footer组件可能在某些路由下不展示，所以需要进行条件渲染
        解决方式一：直接数字而v-if条件渲染，接收当前路由的命名不等于XXX和XXX和XXX
        解决方式二：把插值语法的复杂逻辑直接书写成计算属性
        解决方式三：因为Footer是否展示和路由相关，所以我们可以让路由携带元信息代表当前是否展示
     -->
    <Footer v-if="FooterIsShow" />
  </div>
</template>

<script>
import Header from '@/components/Header';
import Footer from '@/components/Footer';
export default {
  name: 'App',
  components: {
    Header,
    Footer,
  },
  mounted() {
    // console.log(this);
  },
  computed: {
    FooterIsShow() {
      return !this.$route.meta.FooterIsHidden;
    },
  },
};
</script>

<style></style>
